<template>
  <div class="schedule">
    <h1>任务计划</h1>
    <!--添加定时任务form表单-->
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item ref="task_name" label="任务名称：" prop="task_name">
        <a-input v-model="form.task_name" @blur="() => {$refs.task_name.onFieldBlur();}"/>
      </a-form-model-item>
      <a-form-model-item label="请选择主机：" prop="hosts">
        <a-select mode="multiple" :value="form.hosts" style="width: 100%" placeholder="请选择主机" @change="handleHostChange">
          <a-select-option v-for="(host_value,host_index) in host_list" :key="host_index" :value="host_value.id">
           {{host_value.ip_addr}}--{{host_value.hostname}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="请选择周期方式：" prop="hosts">
        <a-select style="width: 120px" @change="handlePeriodChange">
          <a-select-option v-for="(period_value,period_index) in period_way_choices" :value="period_value[0]" :key="period_index">
            {{period_value[1]}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="period_content" label="任务周期值：" prop="period_content">
        <a-input v-model="form.period_content" />
      </a-form-model-item>
      <a-form-model-item ref="period_content" label="任务指令：" prop="period_content">
        <editor v-model="form.task_cmd" @init="editorInit" lang="html" theme="chrome" width="500" height="300"></editor>
      </a-form-model-item>
      <!--按钮-->
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">添加任务</a-button>
        <a-button style="margin-left: 10px;" @click="resetForm">重置任务</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  export default {
    name: 'Schedule',
    data() {
      return {
        labelCol: {span: 4},
        wrapperCol: {span: 14},
        other: '',
        // selectedItems:[], // 选择的主机id数据
        period_way_choices:[],  // 所有周期类型数据
        host_list:[], // 主机列表数据

        // 添加定时任务的数据存储
        form: {
          task_name: '', // 任务名称
          hosts: [],  // 主机列表
          period_way:'1',  // 选择的周期方式
          task_cmd:'',  // 周期指令
          period_content:'',  // 任务
        },
        rules: {
          task_name: [
            {required: true, message: '请输入任务名称', trigger: 'blur'},
          ],
        },

      };
    },
    components: {
      editor: require('vue2-ace-editor'),
    },
    created() {
      // 获取所有主机数据
      this.get_host_list();
      this.get_period_data();
    },
    methods: {
      // 获取周期类型数据
      get_period_data(){
        this.$axios.get(`${this.$settings.HOST}/schedule/periods/`).then((res)=>{
          this.period_way_choices = res.data;
        }).catch((error)=>{

        })
      },
      // 获取主机列表
      get_host_list() {
        let token = this.$settings.check_login(this)
        this.$axios.get(`${this.$settings.HOST}/host/list/`, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': `jwt ${token}`
          },
        }).then((res) => {
            this.host_list = res.data;
        })
      },

      editorInit: function () {
        require('brace/ext/language_tools') //language extension prerequsite...
        require('brace/mode/html')
        require('brace/mode/javascript')    //language
        require('brace/mode/less')
        require('brace/theme/chrome')
        require('brace/snippets/javascript') //snippet
      },

      handlePeriodChange(value) {
        console.log(`selected ${value}`);
        this.form.period_way = value;
      },

      handleHostChange(value) {
        this.form.hosts = value;
        console.log(`selected hosts ${this.form.hosts}`);
      },

      // 添加任务,确认按钮
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log(this.form);
            this.$axios.post(`${this.$settings.HOST}/schedule/tasks/`, this.form).then((res)=>{
              console.log(res.data);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
    },
  };
</script>


<style scoped>

</style>
